import React from 'react'
import { useNavigate, Routes, Route } from 'react-router-dom'
import { VerticalAlignTopOutlined } from '@ant-design/icons'
import { BackTop } from 'antd'
import About from './about/index.jsx'
import FullTime from './signpattern/fulltime.jsx'
import Boutique from './signpattern/boutique.jsx'
import Guaranteed from './signpattern/guaranteed.jsx'
import Potential from './createsecurity/potential.jsx'
import Create from './createsecurity/creative.jsx'
import Finish from './createsecurity/finish.jsx'
import Added from './announcements/added.jsx'
import Submission from './announcements/submission.jsx'
import SignUpProcess from './announcements/signupprocess.jsx'
import style from './css/welfare.module.scss'
import bg from './imgs/bg.png'
export default function WelfarePage() {
    let Navigate = useNavigate()
    const style2 = {
        height: 50,
        width: 50,
        lineHeight: '40px',
        borderRadius: 50,
        backgroundColor: 'orange',
        color: 'rgb(245,242,232)',
        textAlign: 'center',
        fontSize: 35,
    };


    return (
        <div className={style.welfarebox}>
            <img src={bg} alt="" className={style.img} />
            <div className={style.wapper}>
                <div className={style.welfare_menu}>
                    <p className={style.items} onClick={() => { Navigate({ pathname: '/welfare/about' }) }} >关于酷匠网</p>
                    <p className={style.itemtitle}>签约模式</p>
                    <p className={style.items} onClick={() => { Navigate({ pathname: '/welfare/guar' }) }}>保底分成签约</p>
                    <p className={style.items} onClick={() => { Navigate({ pathname: '/welfare/fulltime' }) }}>全勤分成签约</p>
                    <p className={style.items} onClick={() => { Navigate({ pathname: '/welfare/boutique' }) }}>精品分成阅读人气奖</p>
                    <p className={style.itemtitle}>创作保障</p>
                    <p className={style.items} onClick={() => { Navigate({ pathname: '/welfare/potential' }) }}>潜力培养金</p>
                    <p className={style.items} onClick={() => { Navigate({ pathname: '/welfare/create' }) }}>创作助力奖</p>
                    <p className={style.items} onClick={() => { Navigate({ pathname: '/welfare/finish' }) }}>完本续签奖</p>
                    <p className={style.itemtitle}>注意事项</p>
                    <p className={style.items} onClick={() => { Navigate({ pathname: '/welfare/added' }) }}>补充说明</p>
                    <p className={style.items} onClick={() => { Navigate({ pathname: '/welfare/submission' }) }}>投稿说明</p>
                    <p className={style.items} onClick={() => { Navigate({ pathname: '/welfare/signup' }) }}>签约流程</p>
                </div>
                <div className={style.welfare_item}>
                    <Routes>
                        <Route path='/about' element={<About />}></Route>
                        <Route path='/guar' element={<Guaranteed />}></Route>
                        <Route path='/fulltime' element={<FullTime />}></Route>
                        <Route path='/boutique' element={<Boutique />}></Route>
                        <Route path='/potential' element={<Potential />}></Route>
                        <Route path='/create' element={<Create />}></Route>
                        <Route path='/finish' element={<Finish />}></Route>
                        <Route path='/added' element={<Added />}></Route>
                        <Route path='/submission' element={<Submission />}></Route>
                        <Route path='/signup' element={<SignUpProcess />}></Route>
                        <Route path='/*' element={<About />}></Route>
                    </Routes>
                </div>
            </div>
            <BackTop>
                <div style={style2}>
                    <VerticalAlignTopOutlined style={{ marginTop: '10px' }} />
                </div>
            </BackTop>
        </div>
    )

}
